<template>
    <el-form>   
        <div>
              <p> 基础用法</p>
              <el-radio v-model="radio" label="1">基础用法A</el-radio>
              <el-radio v-model="radio" label="2">基础用法B</el-radio>
              <p>禁用单选框</p>
              <el-radio disabled v-model="radio" label="1">选中且禁用</el-radio>
              <el-radio disabled v-model="radio" label="禁用">禁用</el-radio>
              <p>单选框组</p>
              <el-radio-group v-model="radio">
                  <el-radio :label="3">单选框组1</el-radio>
                  <el-radio :label="6">单选框组2</el-radio>
                  <el-radio :label="9">单选框组3</el-radio>
              </el-radio-group>
              <p>单选框组有监听事件</p>
              <el-radio-group v-model="radio" @change="groupChange">
                  <el-radio :label="3">单选框组1</el-radio>
                  <el-radio :label="6">单选框组2</el-radio>
                  <el-radio :label="9">单选框组3</el-radio>
              </el-radio-group>
        </div>
        <div>
            <p>按钮样式</p>
            <el-radio-group v-model="radio1">
                <el-radio-button label="上海"></el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="广州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>

            </el-radio-group>
        </div>
        <div style="margin-top:20px;" >

            <el-radio-group v-model="radio2" size="medium" text-color="#FF0000 ">
                <el-radio-button label="上海"></el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="官州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>

            </el-radio-group>
        </div>
        <div style="margin-top:20px;">
            <el-radio-group v-model="radio3" size="small" fill="#FF0000">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
        </div>
        <div style="margin-top: 20px;">
            <el-radio-group v-model="radio4" size="mini">
                <el-radio-button label="上海"></el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="广州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>

            </el-radio-group>

        </div>

        <p>带有边框</p>
        <div>
            <el-radio v-model="radio1" label="1" border>A</el-radio>
            <el-radio v-model="radio1" label="2" border>B</el-radio>
        </div>
        <div style="margin-top: 20px;">
            <el-radio v-model="radio2" label="1" border size="medium">C</el-radio>
            <el-radio v-model="radio2" label="2" border size="medium">D</el-radio>
        </div>
        <div style="margin: 20px;">
            <el-radio-group v-model="radio3" size="small" >
                <el-radio label="1" border>E</el-radio>
                <el-radio label="2" border>F</el-radio>

            </el-radio-group>

        </div>
        <div style="margin-top: 20px;">
            <el-radio-group v-model="radio4" size="mini" disabled>
                <el-radio label="1" border>G</el-radio>
                <el-radio label="2" border>H</el-radio>

            </el-radio-group>

        </div>

    </el-form>

</template>

<script>


   export default{
        data(){
            return{
                radio:'1',

                radio1:'上海',
                radio2:'上海',
                radio3:'上海',
                radio4:'上海',
                
            };
        },
        methods: {
            groupChange(val){
                console.log('传入的值是:',val);
            }
        }
    }
</script>
